var oInput=document.getElementById("sub").getElementsByTagName("input");
var oUl=document.getElementById("sub").getElementsByTagName("ul");
oInput[0].onclick=function(){
    this.style.backgroundColor="#cccccc";

    oUl[1].style.display="none";
    change(oUl[0],0);
    oUl[0].style.display="block";
   oInput[2].style.backgroundColor="#ffffff";
}
oInput[2].onclick=function(){
    this.style.backgroundColor="#cccccc";
    oUl[0].style.display="none";
    change(oUl[1],2);
    oUl[1].style.display="block";
    oInput[0].style.backgroundColor="#ffffff";
}
function change(obj,n) {
    var oLi = obj.getElementsByTagName("li");
    for (var j = 0; j < oLi.length; j++) {
        oLi[j].onmouseover = function () {
            this.style.fontSize = "15px";
        }
        oLi[j].onmouseout = function () {
            this.style.fontSize = "13px";
        }
        oLi[j].onclick = function () {
            for (var j = 0; j < oLi.length; j++) {
                oLi[j].getElementsByTagName("span")[0].style.color="#cccccc";
            }
            this.getElementsByTagName("span")[0].style.color="blue";
            oInput[n].value = this.getElementsByTagName("i")[0].innerHTML;
            oInput[n].style.backgroundColor = "#ffffff";
            oInput[n].style.color = "#000000"
            this.parentNode.style.display = "none";


        }
    }
}


